<template>
  <div>
    <div>
      <el-table
        size="mini"
        :data="data"
        border
        stripe
        :row-class-name="tableRowClassName"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <el-table-column label="告警等级" align="center">
          <template slot-scope="scope">
            <el-tag type="warning" v-if="scope.row.level === 0">warn</el-tag>
            <el-tag type="danger" v-else-if="scope.row.level === 1">error</el-tag>
            <el-tag v-else>-</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否启用邮件推送" align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.enabled"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="changeEnabled(scope.row.id)"
            ></el-switch>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getMailConfigs, mailConfigEnabled } from '@/api/alarm/mailConfig'

export default {
  name: 'MailConfig',
  data() {
    return {
      data: [],
      loading: false
    }
  },
  computed: {},
  mounted() {
    this.initConfigs()
  },
  methods: {
    initConfigs() {
      this.loading = true
      getMailConfigs().then((resp) => {
        this.loading = false
        if (resp) {
          this.data = resp
        }
      })
    },
    changeEnabled(id) {
      mailConfigEnabled({ id: id })
    }
  }
}
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

label {
  display: inline-block;
  width: 100px;
  text-align: right;
}
</style>
